<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>工作列表</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="author" content="Themesdesign"/>

    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!--Material Icon -->
    <link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css"/>

    <link rel="stylesheet" type="text/css" href="css/fontawesome.css"/>

    <!-- selectize css -->
    <link rel="stylesheet" type="text/css" href="css/selectize.css"/>

    <link rel="stylesheet" type="text/css" href="css/nice-select.css"/>

    <!-- Custom  Css -->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>

<body>
<!-- Loader -->
<div id="preloader">
    <div id="status">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>
</div>
<!-- Loader -->

<!-- Navigation Bar-->
<header id="topnav" class="defaultscroll scroll-active">
    <!-- Tagline STart -->
    <div class="tagline">
        <div class="container">
            <div class="float-left">
            </div>
            <div class="float-right">
                <ul class="topbar-list list-unstyled d-flex" style="margin: 11px 0px;">
                    <li class="list-inline-item" id="login-li"><a href="login.html"><i class="mdi mdi-account mr-2"></i>登录</a>
                    </li>
                    <li class="list-inline-item" id="signup-li"><a href="signup.html"><i
                            class="mdi mdi-account mr-2"></i>注册</a></li>
                    <li class="list-inline-item" id="username-li">
                        <a href="javascript:void(0);" id="username-a"></a>
                    </li>
                    <li class="list-inline-item" id="button-li">
                        <button class="btn btn-primary btn-sm" type="button" id="logout-btn">退出</button>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- Tagline End -->

    <!-- Menu Start -->
    <div class="container">
        <!-- Logo container-->
        <div>
            <a href="index.html" class="logo">
                <img src="images/logo-light.png" alt="" class="logo-light" height="18"/>
                <img src="images/logo-dark.png" alt="" class="logo-dark" height="18"/>
            </a>
        </div>
        <div class="buy-button">
            <a href="post-a-job.html" class="btn btn-primary" id="post-job-a">
                <i class="mdi mdi-cloud-upload"></i>发布工作
            </a>
        </div><!--end login button-->
        <!-- End Logo container-->

        <div id="navigation">
            <!-- Navigation Menu-->
            <ul class="navigation-menu">
                <li><a href="index.html">主页</a></li>
                <li><a href="job-list.html">工作列表</a></li>
                <li class="has-submenu" id="my-page">
                    <a href="javascript:void(0)">个人中心</a><span class="menu-arrow"></span>
                    <ul class="submenu">
                        <li id="my-info" style="display: none;"><a href="create-resume.html">个人信息</a></li>
                        <li id="my-apply" style="display: none;"><a href="my-apply.html">我的申请</a></li>
                        <li id="my-job" style="display: none;"><a href="my-job.html">我的工作</a></li>
                        <li id="my-publish" style="display: none;"><a href="my-publish.html">我的发布</a></li>
                        <li id="my-employ" style="display: none;"><a href="my-employ.html">申请列表</a></li>
                        <li id="my-staff" style="display: none;"><a href="my-staff.html">我的员工</a></li>
                        <li id="job-manager" style="display: none;"><a href="job-manager.html">工作管理</a></li>
                        <li id="user-manager" style="display: none;"><a href="user-manager.html">用户管理</a></li>
                    </ul>
                </li>
                <li><a href="faq.html">公告</a></li>
            </ul><!--end navigation menu-->
        </div><!--end navigation-->
    </div><!--end container-->
    <!--end end-->
</header><!--end header-->
<!-- Navbar End -->

<!-- Start Home -->
<section class="bg-half" style="background: url('images/bg-home.jpg') center center;">
    <div class="bg-overlay"></div>
    <div class="home-center">
        <div class="home-desc-center">
            <div class="container">
                <div class="home-form-position">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="home-registration-form p-4 mb-3">
                                <form class="registration-form">
                                    <div class="row">
                                        <div class="col-lg-5 col-md-6">
                                            <div class="registration-form-box">
                                                <i class="fa fa-briefcase"></i>
                                                <input type="text" id="search-keyword"
                                                       class="form-control rounded registration-input-box"
                                                       placeholder="关键字">
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md-6">
                                            <div class="registration-form-box">
                                                <i class="fa fa-list-alt"></i>
                                                <input type="text" id="search-company"
                                                       class="form-control rounded registration-input-box"
                                                       placeholder="用工单位">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-6">
                                            <div class="registration-form-box">
                                                <input type="button" id="search-button" name="send"
                                                       class="btn btn-primary" value="搜索">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end home -->

<!-- JOB LIST START -->
<section class="section bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="section-title text-center mb-4 pb-2">
                    <h4 class="title title-line pb-5">工作列表</h4>
                </div>
            </div>
        </div>

        <div class="row" id="fresh-div">
            <div class="col-lg-3">
                <div class="left-sidebar">
                    <div class="accordion" id="accordionExample">
                        <div class="card rounded mt-4">
                            <a data-toggle="collapse" href="#collapseOne" class="job-list" aria-expanded="true"
                               aria-controls="collapseOne">
                                <div class="card-header" id="headingOne">
                                    <h6 class="mb-0 text-dark f-18">时间</h6>
                                </div>
                            </a>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
                                <div class="card-body p-0">
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="custom-radio1" name="customRadio"
                                               class="custom-control-input">
                                        <label class="custom-control-label ml-1 text-muted" for="custom-radio1">
                                            过去1小时
                                        </label>
                                    </div>

                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="custom-radio2" name="customRadio"
                                               class="custom-control-input">
                                        <label class="custom-control-label ml-1 text-muted" for="custom-radio2">
                                            过去24小时
                                        </label>
                                    </div>

                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="custom-radio3" name="customRadio"
                                               class="custom-control-input">
                                        <label class="custom-control-label ml-1 text-muted" for="custom-radio3">
                                            过去7天
                                        </label>
                                    </div>

                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="custom-radio4" name="customRadio"
                                               class="custom-control-input">
                                        <label class="custom-control-label ml-1 text-muted" for="custom-radio4">
                                            过去14天
                                        </label>
                                    </div>

                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="custom-radio5" name="customRadio"
                                               class="custom-control-input">
                                        <label class="custom-control-label ml-1 text-muted" for="custom-radio5">
                                            过去30天
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 动态工作列表 -->
            <div class="row col-lg-9" id="job-list-div">

            </div>
        </div>
        <!-- 分页 -->
        <div class="row">
            <div class="col-lg-12 mt-4 pt-2">
                <nav aria-label="Page navigation example">
                    <ul class="pagination job-pagination mb-0 justify-content-center" id="page-ul">

                    </ul>
                </nav>
            </div>
        </div>

    </div>
</section>
<!-- JOB LIST START -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body" id="warning-fade">
                按下 ESC 按钮退出。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<hr>
<footer class="footer footer-bar">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="">
                    <p class="mb-0">Copyright &copy; 2020.考文秋 All rights reserved.<a target="_blank" href=""></a></p>
                </div>
            </div>
        </div>
    </div><!--end container-->
</footer><!--end footer-->
<!-- Footer End -->

<!-- Back to top -->
<a href="#" class="back-to-top rounded text-center" id="back-to-top">
    <i class="mdi mdi-chevron-up d-block"> </i>
</a>
<!-- Back to top -->

<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/plugins.js"></script>

<!-- selectize js -->
<script src="js/selectize.min.js"></script>

<script src="js/jquery.nice-select.min.js"></script>

<script src="js/app.js"></script>

<script src="js/js.cookie.js"></script>
<script src="js/header-user.js"></script>
<script src="js/job-list.js"></script>
<script>
    // 申请工作
    function apply_job(jobId) {
        var role = Cookies.get("role");
        if(role == "COMPANY"){
            $("#warning-fade").html("用工单位不能申请工作！");
            $("#myModal").modal();
            return;
        }

        var userId = Cookies.get("userId");
        $.ajax({
            type: "post",
            url: "/work/applyJob",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify({
                "applyUserId": userId,
                "jobId": jobId,
                "applyStatus": 1
            }),
            success: function (result) {
                $("#warning-fade").html(result.statusInfo);
                $("#myModal").modal();
            },
            error: function () {
                $("#warning-fade").html("服务请求失败！");
                $("#myModal").modal();
            }
        });
    }

    function click_page_num(pageNum) {
        Cookies.set('pageNum', pageNum, {expires: 7, path: ''});
        var pageSize = 5;
        var jobKeyword = $("#search-keyword").val();
        var departKeyword = $("#search-company").val();
        $.ajax({
            type: "get",
            url: "/work/getJobList?pageNum=" + pageNum + "&pageSize=" + pageSize + "&jobKeyword=" + jobKeyword + "&departKeyword=" + departKeyword,
            dataType: "json",
            success: function (result) {
                // 生成列表
                generateHtml(result);

                // 搜索词填充
                $("#search-keyword").val(jobKeyword);
                $("#search-company").val(departKeyword);

                // 生成页码
                generatePage(result);
            },
            error: function () {
                $("#warning-fade").html("服务请求失败！");
                $("#myModal").modal();
            }
        });
    }

    function pre() {
        var pageNum = Cookies.get("pageNum");
        click_page_num(Number(pageNum) - 1);
    }

    function next() {
        var pageNum = Cookies.get("pageNum");
        click_page_num(Number(pageNum) + 1);
    }

    // 生成页码
    function generatePage(result) {
        var pageSize = result.data.pageSize;
        var pageNum = result.data.pageNum;
        var page_li_obj = $("#page-ul");
        page_li_obj.html('');
        var total = result.data.total;
        var page_html = '';
        var pre_page_html = '';
        if (pageNum == 1) {
            pre_page_html = '<li class="page-item disabled">' +
                '<a class="page-link" href="" tabindex="-1" aria-disabled="true">' +
                '<i class="mdi mdi-chevron-double-left f-15"></i>' +
                '</a>' +
                '</li>';
        } else {
            pre_page_html = '<li class="page-item">' +
                '<a class="page-link" onclick="pre()">' +
                '<i class="mdi mdi-chevron-double-left f-15"></i>' +
                '</a>' +
                '</li>';
        }
        page_html = page_html + pre_page_html;

        // 向上取整
        var num = Math.ceil(total / pageSize);
        for (var i = 1; i <= num; i++) {
            var page_li = '<li class="page-item" id="li_' + i + '"><a class="page-link" onclick="click_page_num(' + i + ')">' + i + '</a></li>';
            if (pageNum == i) {
                page_li = '<li class="page-item active" id="li_' + i + '"><a class="page-link" onclick="click_page_num(' + i + ')">' + i + '</a></li>';
            }
            page_html = page_html + page_li;
        }

        var next_page_html = '';
        if (pageNum == num) {
            next_page_html = '<li class="page-item disabled">' +
                '<a class="page-link" href="" tabindex="-1" aria-disabled="true"">' +
                '<i class="mdi mdi-chevron-double-right f-15"></i>' +
                '</a>' +
                '</li>';
        } else {
            next_page_html = '<li class="page-item">' +
                '<a class="page-link" onclick="next()">' +
                '<i class="mdi mdi-chevron-double-right f-15"></i>' +
                '</a>' +
                '</li>';
        }
        page_html = page_html + next_page_html;
        page_li_obj.append(page_html);
    }

    // 生成工作列表
    function generateHtml(result) {
        var html = '';
        $.each(result.data.data, function (i, item) {
            var div = '<div class="col-lg-9 mt-4 pt-2">' +
                '<div class="job-list-box border rounded">' +
                '<div class="p-3">' +
                '<div class="row align-items-center">' +
                '<div class="col-lg-2">' +
                '<div class="company-logo-img">' +
                '<img src="" alt="" class="img-fluid mx-auto d-block">' +
                '</div>' +
                '</div>' +
                '<div class="col-lg-7 col-md-9">' +
                '<div class="job-list-desc">' +
                '<h6 class="mb-2"><a href="job-details.html?jobId=' + item.jobId + '" class="text-dark">' + item.jobTitle + '</a></h6>' +
                '<p class="text-muted mb-0"><i class="mdi mdi-bank mr-2"></i>部门：' + item.department + '</p>' +
                '<ul class="list-inline mb-0">' +
                '<li class="list-inline-item mr-3">' +
                '<p class="text-muted mb-0"><i class="mdi mdi-cellphone mr-2"></i>电话：' + item.phoneNumber + '</p>' +
                '</li>' +
                '<li class="list-inline-item">' +
                '<p class="text-muted mb-0"><i class="mdi mdi-clock-outline mr-2"></i>' + item.gmtCreate + '</p>' +
                '</li>' +
                '</ul>' +
                '</div>' +
                '</div>' +
                '<div class="col-lg-3 col-md-3">' +
                '<div class="job-list-button-sm text-right">' +
                '<div class="mt-3">' +
                '<a href="javascript:void(0);" onclick="apply_job(' + item.jobId + ')" class="btn btn-sm btn-primary">申请</a>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';
            html = html + div;
        });

        var div_obj = $("#job-list-div");
        div_obj.html("");
        div_obj.append(html);
    }
</script>

</body>
</html>